<template>
	<view>
		<uv-sticky bgColor="#fff">
			<view style="padding: 20rpx;">
				<uv-subsection :list="list" :current="current" custom-style="height: 100rpx;" fontSize="15" activeColor="#333" @change="subChange"></uv-subsection>
				<uv-tabs :current="tabCurrent" :list="filteredShapes" keyName="name" :itemStyle="{'height':'100rpx','padding-left':'15px','padding-right':'15px'}" :activeStyle="{'transform':'scale(1.2)'}" :inactiveStyle="{'transform':'scale(1.1)'}" @click="tabClick"></uv-tabs>
			</view>
		</uv-sticky>

		<view class="content">
			<view class="formula">
				<view>{{ currentShape.name }} - {{ currentShape.formulaDesc }}</view>
				<view class="formula-label">{{ currentShape.concept }}</view>
				<view class="formula-desc">{{ currentShape.formula }}</view>
				<view v-if="currentShape.note" class="formula-note">{{ currentShape.note }}</view>
			</view>


			<view v-for="(param,index) in currentShape.params" :key="index">
				<view class="unit-name">{{ param.label }}（{{ param.unit }}）</view>
				<input :value="param.value" type="digit" :placeholder="`请输入${param.label}`"
					@input="updateParam(index, $event)" />
			</view>

			<view class="content-res" v-if="result !== null">
				<view class="result-label">计算结果</view>
				<view class="result-value">{{ result.toFixed(4) }} {{ currentShape.resultUnit }}</view>
			</view>

			<view class="content-err" v-if="showError">
				<view>请输入有效的数值（≥0.01）</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'

	const current = ref(0)
	const tabCurrent = ref(0)
	const list = [{
		name: '周长计算',
		value: "perimeter"
	}, {
		name: '面积计算',
		value: "area"
	}, {
		name: '体积计算',
		value: "volume"
	}]

	// 扩展后的图形数据（共15种）
	const allShapes = [
		// ---------------------- 周长计算（5种）----------------------
		{
			id: 'circle-peri',
			name: '圆形',
			type: 'perimeter',
			formulaDesc: '周长计算',
			concept: '圆的周长是绕圆一周的长度，也叫圆周长度',
			formula: 'C = 2πr 或 C = πd（r=半径，d=直径）',
			note: 'π≈3.14159，d=2r',
			params: [{
				label: '半径',
				unit: '米(m)',
				value: ''
			}],
			resultUnit: '米(m)',
			calculate: (params) => 2 * Math.PI * params[0]
		},
		{
			id: 'rect-peri',
			name: '长方形',
			type: 'perimeter',
			formulaDesc: '周长计算',
			concept: '长方形周长是四条边的长度总和，对边相等',
			formula: 'C = 2×(a + b)（a=长，b=宽）',
			params: [{
					label: '长度',
					unit: '米(m)',
					value: ''
				},
				{
					label: '宽度',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '米(m)',
			calculate: (params) => 2 * (params[0] + params[1])
		},
		{
			id: 'square-peri',
			name: '正方形',
			type: 'perimeter',
			formulaDesc: '周长计算',
			concept: '正方形周长是四条边的长度总和，四条边都相等',
			formula: 'C = 4×a（a=边长）',
			params: [{
				label: '边长',
				unit: '米(m)',
				value: ''
			}],
			resultUnit: '米(m)',
			calculate: (params) => 4 * params[0]
		},
		{
			id: 'triangle-peri',
			name: '三角形',
			type: 'perimeter',
			formulaDesc: '周长计算',
			concept: '三角形周长是三条边的长度总和',
			formula: 'C = a + b + c（a、b、c=三条边长）',
			note: '需满足三角形三边关系：任意两边之和大于第三边',
			params: [{
					label: '边长a',
					unit: '米(m)',
					value: ''
				},
				{
					label: '边长b',
					unit: '米(m)',
					value: ''
				},
				{
					label: '边长c',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '米(m)',
			calculate: (params) => params[0] + params[1] + params[2]
		},
		{
			id: 'trapezoid-peri',
			name: '梯形',
			type: 'perimeter',
			formulaDesc: '周长计算',
			concept: '梯形周长是四条边的长度总和，有一组对边平行',
			formula: 'C = a + b + c + d（a=上底，b=下底，c、d=腰长）',
			params: [{
					label: '上底',
					unit: '米(m)',
					value: ''
				},
				{
					label: '下底',
					unit: '米(m)',
					value: ''
				},
				{
					label: '腰长c',
					unit: '米(m)',
					value: ''
				},
				{
					label: '腰长d',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '米(m)',
			calculate: (params) => params[0] + params[1] + params[2] + params[3]
		},

		// ---------------------- 面积计算（5种）----------------------
		{
			id: 'circle-area',
			name: '圆形',
			type: 'area',
			formulaDesc: '面积计算',
			concept: '圆的面积是圆形平面所占据的空间大小',
			formula: 'S = πr²（r=半径）',
			note: 'π≈3.14159',
			params: [{
				label: '半径',
				unit: '米(m)',
				value: ''
			}],
			resultUnit: '平方米(m²)',
			calculate: (params) => Math.PI * params[0] * params[0]
		},
		{
			id: 'rect-area',
			name: '长方形',
			type: 'area',
			formulaDesc: '面积计算',
			concept: '长方形面积是其平面所占据的空间大小',
			formula: 'S = a×b（a=长，b=宽）',
			params: [{
					label: '长度',
					unit: '米(m)',
					value: ''
				},
				{
					label: '宽度',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '平方米(m²)',
			calculate: (params) => params[0] * params[1]
		},
		{
			id: 'square-area',
			name: '正方形',
			type: 'area',
			formulaDesc: '面积计算',
			concept: '正方形面积是其平面所占据的空间大小，四条边相等',
			formula: 'S = a²（a=边长）',
			params: [{
				label: '边长',
				unit: '米(m)',
				value: ''
			}],
			resultUnit: '平方米(m²)',
			calculate: (params) => params[0] * params[0]
		},
		{
			id: 'triangle-area',
			name: '三角形',
			type: 'area',
			formulaDesc: '面积计算',
			concept: '三角形面积是其平面所占据的空间大小',
			formula: 'S = (a×h)÷2（a=底边长，h=对应高）',
			params: [{
					label: '底边长',
					unit: '米(m)',
					value: ''
				},
				{
					label: '对应高',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '平方米(m²)',
			calculate: (params) => (params[0] * params[1]) / 2
		},
		{
			id: 'parallelogram-area',
			name: '平行四边形',
			type: 'area',
			formulaDesc: '面积计算',
			concept: '平行四边形面积是其平面所占据的空间大小，对边平行且相等',
			formula: 'S = a×h（a=底边长，h=对应高）',
			params: [{
					label: '底边长',
					unit: '米(m)',
					value: ''
				},
				{
					label: '对应高',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '平方米(m²)',
			calculate: (params) => params[0] * params[1]
		},

		// ---------------------- 体积计算（5种）----------------------
		{
			id: 'cube-volume',
			name: '正方体',
			type: 'volume',
			formulaDesc: '体积计算',
			concept: '正方体体积是其立体空间所占据的大小，12条棱长相等',
			formula: 'V = a³（a=棱长）',
			params: [{
				label: '棱长',
				unit: '米(m)',
				value: ''
			}],
			resultUnit: '立方米(m³)',
			calculate: (params) => params[0] * params[0] * params[0]
		},
		{
			id: 'cuboid-volume',
			name: '长方体',
			type: 'volume',
			formulaDesc: '体积计算',
			concept: '长方体体积是其立体空间所占据的大小',
			formula: 'V = a×b×h（a=长，b=宽，h=高）',
			params: [{
					label: '长度',
					unit: '米(m)',
					value: ''
				},
				{
					label: '宽度',
					unit: '米(m)',
					value: ''
				},
				{
					label: '高度',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '立方米(m³)',
			calculate: (params) => params[0] * params[1] * params[2]
		},
		{
			id: 'sphere-volume',
			name: '球体',
			type: 'volume',
			formulaDesc: '体积计算',
			concept: '球体体积是其立体空间所占据的大小，表面任意点到球心距离相等',
			formula: 'V = (4/3)πr³（r=半径）',
			note: 'π≈3.14159',
			params: [{
				label: '半径',
				unit: '米(m)',
				value: ''
			}],
			resultUnit: '立方米(m³)',
			calculate: (params) => (4 / 3) * Math.PI * Math.pow(params[0], 3)
		},
		{
			id: 'cylinder-volume',
			name: '圆柱体',
			type: 'volume',
			formulaDesc: '体积计算',
			concept: '圆柱体体积是其立体空间所占据的大小，由两个圆形底面和一个曲面组成',
			formula: 'V = πr²h（r=底面半径，h=高）',
			note: 'π≈3.14159',
			params: [{
					label: '底面半径',
					unit: '米(m)',
					value: ''
				},
				{
					label: '高度',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '立方米(m³)',
			calculate: (params) => Math.PI * params[0] * params[0] * params[1]
		},
		{
			id: 'cone-volume',
			name: '圆锥体',
			type: 'volume',
			formulaDesc: '体积计算',
			concept: '圆锥体体积是其立体空间所占据的大小，由一个圆形底面和一个顶点组成',
			formula: 'V = (1/3)πr²h（r=底面半径，h=高）',
			note: 'π≈3.14159，同底同高的圆锥体积是圆柱的1/3',
			params: [{
					label: '底面半径',
					unit: '米(m)',
					value: ''
				},
				{
					label: '高度',
					unit: '米(m)',
					value: ''
				}
			],
			resultUnit: '立方米(m³)',
			calculate: (params) => (1 / 3) * Math.PI * params[0] * params[0] * params[1]
		}
	]

	// 状态管理
	const activeType = ref('perimeter');
	const activeShapeId = ref('circle-peri');
	const result = ref(null);
	const showError = ref(false);

	// 过滤图形
	const filteredShapes = computed(() => {
		return allShapes.filter(shape => shape.type === activeType.value);
	});

	// 当前图形
	const currentShape = computed(() => {
		return allShapes.find(shape => shape.id === activeShapeId.value) || allShapes[0];
	});

	// 更新参数并计算
	const updateParam = (idx, e) => {
		// 更新参数值
		currentShape.value.params[idx].value = e.target.value;

		// 收集所有参数值
		const paramValues = currentShape.value.params.map(p => {
			const num = parseFloat(p.value);
			return isNaN(num) ? null : num;
		});

		// 检查是否所有参数都有效
		const allValid = paramValues.every(v => v !== null && v >= 0.01);

		if (allValid) {
			// 计算结果
			result.value = currentShape.value.calculate(paramValues);
			showError.value = false;
		} else {
			// 无效输入
			result.value = null;
			showError.value = paramValues.some(v => v !== null && (v < 0.01 || isNaN(v)));
		}
	};

	// 重置参数
	const resetParams = () => {
		currentShape.value.params.forEach(param => {
			param.value = '';
		});
		result.value = null;
		showError.value = false;
	};

	// 点击分段器
	function subChange(index) {
		current.value = index
		activeType.value = list[index].value

		tabClick({
			index: 0,
			id: filteredShapes.value[0].id
		})
	}

	// 点击标签
	function tabClick(e) {
		// console.log('tabClick',e)
		tabCurrent.value = e.index

		activeShapeId.value = e.id

		resetParams()
	}
</script>

<style>
	@import "math.css"
</style>